<template>
	<div>
		<div class="py_5 px_10">
			<el-row>
				<el-col :span="2">
					<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
				</el-col>
				<el-col :span="22">
					<el-form :inline="true" class="form-inline fr">
						<el-form-item class="w_80">
							<el-select v-model="city_arr" placeholder="全部城市" @change="changeBtndialog">
								<el-option
									v-for="item in cityList"
									:key="item.id"
									:label="item.city_name"
									:value="`${item.id}|${item.city_name}`"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-select v-model="area_arr" multiple collapse-tags placeholder="全部商圈">
								<el-option
									v-for="item in areaList"
									:key="item.id"
									:label="item.area_name"
									:value="`${item.id}|${item.area_name}`"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="w_180">
							<el-select v-model="week_arr" placeholder="选择结束月份">
								<el-option
									v-for="(item, index) in pagingArr"
									:key="index"
									:label="`${item.name}`"
									:value="item.year + item.month"
									>{{ item.name }}</el-option
								>
							</el-select>
						</el-form-item>
						<el-button size="mini" type="primary" class="round-right" @click="shearchBtn">搜索</el-button>
						<el-button size="mini" round @click="resetBtn">重置</el-button>
					</el-form>
				</el-col>
			</el-row>
		</div>
		<template>
			<el-table :data="demandList" stripe>
				<el-table-column prop="name" label="项目" align="center">
					<template slot-scope="{ row, $index }">
						<span :class="$index < 5 ? 'text-danger' : ''">{{ row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column>
					<el-table-column
						prop="week0"
						align="center"
						:label="demanddata[0].month.toString().substr(4, 2) + '月'"
					></el-table-column>
				</el-table-column>
				<el-table-column v-for="(item, index) in demanddata.slice(1)" :key="index">
					<el-table-column
						:prop="'week' + (index + 1)"
						align="center"
						:label="item.month.toString().substr(4, 2) + '月'"
					></el-table-column>
					<el-table-column :prop="'sequential' + (index + 1)" label="环比" align="center"></el-table-column>
				</el-table-column>
			</el-table>
		</template>
		<el-row :gutter="15" class="Module3">
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<div class="Module3-box mt_20 box-shadow">
					<div class="card-header card-header-two">
						<h4>人才数统计</h4>
					</div>
					<div class="Module3-box-twoBox">
						<div class="Module3-two-content">
							<template>
								<echarts :demanddatas="demanddata"></echarts>
							</template>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<div class="Module3-box mt_20 box-shadow">
					<div class="card-header card-header-three">
						<h4>工时统计</h4>
					</div>
					<div class="Module3-box-threeBox">
						<div class="Module3-three-content">
							<template>
								<echartsTwo :demanddatas="demanddata"></echartsTwo>
							</template>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
var common = require('../../../../static/tool.js')
import { mainfun } from '../../../../../assets/js/main.js'
import echarts from './echartsnext.vue'
import echartsTwo from './echartstwonext.vue'
export default {
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			tYear: new Date().getFullYear().toString(), //当前年
			oYear: (new Date().getFullYear() - 1).toString(), //去年
			demanddata: [
				{
					month: '2020--'
				},
				{
					month: '2020--'
				},
				{
					month: '2020--'
				},
				{
					month: '2020--'
				}
			],
			demandList: [
				{
					name: '累计出工人数'
				},
				{
					name: '出工人数'
				},
				{
					name: '新增出工人数'
				},
				{
					name: '实际出工总时长'
				},
				{
					name: '实际人均日时长'
				},
				{
					name: '实际日均时长'
				},
				{
					name: '计划出工总时长'
				},
				{
					name: '计划人均日时长'
				},
				{
					name: '计划日均时长'
				},
				{
					name: '早班占比'
				},
				{
					name: '中班占比'
				},
				{
					name: '晚班占比'
				},
				{
					name: '夜班占比'
				}
			], //店铺列表
			//搜索对应值
			areaList: [],
			weekList: [], //结束月
			cityList: [], //城市列表
			city_arr: '',
			city_id: '',
			city_name: '',
			area_arr: '', //商圈信息
			area_id: '',
			area_name: '',
			week_arr: '', //结束月份数据
			pagingArr: []
		}
	},
	components: { echarts, echartsTwo },
	computed: {
		city_value() {
			return this.city_arr
		}
	},
	watch: {
		//商圈改变
		areaList(newValue, oldValue) {
			if (oldValue == '') {
				this.listShop()
			}
		},
		city_value(newVal, oldVal) {
			if (oldVal) {
				let [id, name] = oldVal.split('|')
				if (id === '北京') {
					id = 1
				}
				// 存储旧的商圈数据
				this.selectedAreasMap[`city-${id}`] = this.area_arr
			}
			console.log('存储值', this.selectedAreasMap)
			if (newVal && this.city_id) {
				this.listArea(this.city_id) //商圈列表
			}
		}
	},
	created() {
		this.selectedAreasMap = {}
		this.getcityList()
		this.getweeklist()
	},
	mounted() {},
	methods: {
		//获取结束月份
		getweeklist() {
			// 获取当前月
			var d = new Date()
			d.setDate(d.getDate())
			var m = d.getMonth() + 1

			for (let index = m - 5; index <= m; index++) {
				let new_index
				let paging
				if (index <= 0) {
					new_index = 12 + index
					if (new_index < 10) {
						new_index = '0' + new_index
					}
					paging = {
						month: new_index,
						year: this.oYear,
						name: +new_index + '月'
					}
				} else {
					new_index = index
					if (new_index < 10) {
						new_index = '0' + new_index
					}
					paging = {
						month: new_index,
						year: this.tYear,
						name: +new_index + '月'
					}
				}
				this.pagingArr.push(paging)
			}

			// this.week_arr = m.toString()
			this.week_arr = this.pagingArr[this.pagingArr.length - 1].year + this.pagingArr[this.pagingArr.length - 1].month
		},
		listShop() {
			this.redef()
			//获取列表
			let s_departmentIds_Arr = new Array()
			this.area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id.toString())
			})
			let fn = new FormData()
			fn.append('city_id', this.city_id)
			fn.append('area_id', s_departmentIds_Arr)
			fn.append('type', 'month')
			// var value_start = Number(this.week_arr)
			// if (value_start < 10) {
			// 	value_start = '0' + value_start
			// }
			// value_start = value_start.toString()
			// var value_end = Number(this.week_arr) - 3
			// if (value_end < 10) {
			// 	value_end = '0' + value_end
			// }
			// value_end = value_end.toString()
			fn.append('value_start', '202101')
			fn.append('value_end', this.week_arr)

			this.$http.post(this.url + '/report/listMonthWeek', fn).then(
				res => {
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						if (res.data.data.list != '') {
							var arr = res.data.data.list
							// this.demanddata = arr.reverse();//进行逆序
							this.demanddata = arr
							//数据处理
							this.demanddata.forEach((item, index) => {
								var obj1 = {}
								var obj2 = {}
								var obj3 = {}
								var obj4 = {}
								var obj5 = {}
								var obj6 = {}
								var obj7 = {}
								var obj8 = {}
								var obj9 = {}
								var obj10 = {}
								var obj11 = {}
								var obj12 = {}
								var obj13 = {}
								obj1['week' + index] = item.worker_total //累计出工人数
								obj2['week' + index] = item.worker_num //出工人数
								obj3['week' + index] = item.worker_new //新增出工人数
								obj4['week' + index] = item.hour_actual_finish //实际出工总时长
								obj5['week' + index] = item.hour_actual_per //实际人均日时长
								obj6['week' + index] = item.hour_actual_day //实际日均时长
								obj7['week' + index] = item.hour_expect_finish //计划出工总时长
								obj8['week' + index] = item.hour_expect_per //计划人均日时长
								obj9['week' + index] = item.hour_expect_day //计划日均时长
								obj10['week' + index] = item.ratio_morning //早班占比
								obj11['week' + index] = item.ratio_noon //中班占比
								obj12['week' + index] = item.ratio_evening //晚班占比
								obj13['week' + index] = item.ratio_night //夜班占比
								if (index != 0) {
									obj1['sequential' + index] = mainfun.percentage(item.worker_total_sequential) //累计出工人数环比
									obj2['sequential' + index] = mainfun.percentage(item.worker_num_sequential) //出工人数环比
									obj3['sequential' + index] = mainfun.percentage(item.worker_new_sequential) //新增出工人数环比
									obj4['sequential' + index] = mainfun.percentage(item.hour_actual_finish_sequential) //实际出工总时长环比
									obj5['sequential' + index] = mainfun.percentage(item.hour_actual_per_sequential) //实际人均日时长环比
									obj6['sequential' + index] = mainfun.percentage(item.hour_actual_day_sequential) //实际日均时长环比
									obj7['sequential' + index] = mainfun.percentage(item.hour_expect_finish_sequential) //计划出工总时长环比
									obj8['sequential' + index] = mainfun.percentage(item.hour_expect_per_sequential) //计划人均日时长环比
									obj9['sequential' + index] = mainfun.percentage(item.hour_expect_day_sequential) //计划日均时长环比
									obj10['sequential' + index] = mainfun.percentage(item.ratio_morning_sequential) //早班占比环比
									obj11['sequential' + index] = mainfun.percentage(item.ratio_noon_sequential) //中班占比环比
									obj12['sequential' + index] = mainfun.percentage(item.ratio_evening_sequential) //晚班占比环比
									obj13['sequential' + index] = mainfun.percentage(item.ratio_night_sequential) //夜班占比环比
								}
								Object.assign(this.demandList[0], obj1) //累计出工人数
								Object.assign(this.demandList[1], obj2) //出工人数
								Object.assign(this.demandList[2], obj3) //新增出工人数
								Object.assign(this.demandList[3], obj4) //实际出工总时长
								Object.assign(this.demandList[4], obj5) //实际人均日时长
								Object.assign(this.demandList[5], obj6) //实际日均时长
								Object.assign(this.demandList[6], obj7) //计划出工总时长
								Object.assign(this.demandList[7], obj8) //计划人均日时长
								Object.assign(this.demandList[8], obj9) //计划日均时长
								Object.assign(this.demandList[9], obj10) //早班占比
								Object.assign(this.demandList[10], obj11) //中班占比
								Object.assign(this.demandList[11], obj12) //晚班占比
								Object.assign(this.demandList[12], obj13) //夜班占比
							})
						} else {
							this.redef()
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//获取城市列表
		getcityList() {
			let fn = new FormData()
			this.$http.post(this.url + '/city/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.cityList = res.data.data.list
						this.city_arr = this.cityList[0].city_name
						this.city_id = this.cityList[0].id
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//获取商圈列表
		listArea(city_id) {
			this.area_arr = []
			let fn = new FormData()
			fn.append('city_id', city_id)
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
							// if (this.area_arr == '' || this.area_arr == null) {
							// 	// 默认选中非254-平谷的
							// 	this.areaList.forEach(element => {
							// 		// 平谷
							// 		if (element.area_name != '平谷') {
							// 			var pusharr = element.id + '|' + element.area_name
							// 			this.area_arr.push(pusharr)
							// 		}
							// 	})
							// }
							if (this.selectedAreasMap[`city-${city_id}`] && this.selectedAreasMap[`city-${city_id}`].length) {
								this.area_arr = this.selectedAreasMap[`city-${city_id}`]
							}
						} else {
							this.areaList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeBtndialog() {
			let [id, name] = this.city_arr.split('|') // es6 数组解构赋值
			this.city_id = id.toString()
			this.city_name = name.toString()
		},
		changeBtndialogarea() {
			let [id, name] = this.area_arr.split('|') // es6 数组解构赋值
			this.area_id = id.toString()
			this.area_name = name.toString()
		},
		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},
		resetBtn() {
			//重置
			// this.resetDataAdd() //重置请求数据
			this.getcityList()
			this.pageNum = 1
			this.listShop()
		},
		resetDataAdd() {
			this.city_arr = ''
			this.city_id = ''
			this.city_name = ''
			this.area_arr = '' //商圈信息
			this.area_id = ''
			this.area_name = ''
		},
		downloadOrder() {
			let s_departmentIds_Arr = new Array()
			this.area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id)
			})
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				city_id: this.city_id,
        area_id: s_departmentIds_Arr.join(','),
				type: 'month',
				value_start: '202101',
				// value_start: this.tYear + value_end,
				value_end: this.week_arr
			}

			let param = $.param(obj)
			window.location.href = this.url + '/report/exportListMonthWeek?' + param
		},
		redef() {
			this.demanddata = [
				{
					month: '2020--'
				},
				{
					month: '2020--'
				},
				{
					month: '2020--'
				},
				{
					month: '2020--'
				}
			]
			this.demandList = [
				{
					name: '累计出工人数'
				},
				{
					name: '出工人数'
				},
				{
					name: '新增出工人数'
				},
				{
					name: '实际出工总时长'
				},
				{
					name: '实际人均日时长'
				},
				{
					name: '实际日均时长'
				},
				{
					name: '计划出工总时长'
				},
				{
					name: '计划人均日时长'
				},
				{
					name: '计划日均时长'
				},
				{
					name: '早班占比'
				},
				{
					name: '中班占比'
				},
				{
					name: '晚班占比'
				},
				{
					name: '夜班占比'
				}
			]
		}
	},
	filters: {}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
.main_user {
	background: var(--zfy-red);
	color: #fff;
	text-decoration: none;
	padding: 2px 4px;
	border-radius: 4px;
}
.row-info {
	padding: 10px 0;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}

.auto_top p {
	text-align: center;
}
</style>



// WEBPACK FOOTER //
// src/components/sheet/shop/three.vue